{extend name="index/public" /}

{block name="content"}
<form class="layui-form" action="" id="searchBox">
    <div class="layui-inline" style="margin-right:3px;">
        <select class="selectpicker" id="channel_select" multiple data-live-search="true" data-style="btn-inverse">
            {volist name="channel_data" id="vo"}
            <option value="{$vo.cps_id}">{$vo.cps_id}:{$vo.cps_name}</option>
            {/volist}
        </select>
        <input type="hidden" name="channel_id" id="channel_id">
    </div>
    <div class="layui-inline" style="margin-right:3px;">
        <select class="selectpicker" id="game_select" multiple data-live-search="true" data-style="btn-inverse">
            {volist name="game_data" id="vo"}
            <option value="{$vo.game_id}">{$vo.game_id}:{$vo.game_name}</option>
            {/volist}
        </select>
        <input type="hidden" name="game_id" id="game_id">
    </div>
    <div class="layui-inline" style="width: 190px;">
        <a href="javascript:;" class="layui-btn searchBtn my-btn my-btn-sm">搜索</a>
        <a class="layui-btn my-btn my-btn-sm" type="button" id="pack">加入打包队列</a>
    </div>
</form>

<table id="tableBox" lay-filter="tableBox"></table>

<script type="text/html" id="tableBar">
    <a href="{{ d.download }}" class="layui-btn layui-btn-green layui-btn-sm" lay-event="download">下载</a>
</script>
{/block}

{block name="css"}
<link rel="stylesheet" href="__STATIC__/js/bootselect/bootstrap-3.3.4.css">
<link rel="stylesheet" href="__STATIC__/js/bootselect/dist/css/bootstrap-select.css">
<style>
    a:hover, a:focus {text-decoration: none;color:#fff;}
    #searchBox .bootstrap-select {float: left; margin-right: 10px; }
    #searchBox .dropdown-toggle {padding: 5px 10px; border-radius: 0;}
    #searchBox .form-control {padding: 0;}
</style>
{/block}

{block name="js"}
<script src="__STATIC__/js/bootselect/jquery-2.0.3.min.js"></script>
<script src="__STATIC__/js/bootselect/bootstrap-3.3.4.js"></script>
<script src="__STATIC__/js/bootselect/dist/js/bootstrap-select.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table
            ,$ = layui.$
            ,form = layui.form
            ,load = null
            ,active = {
                reload: function () {
                    var channel_id = $('#channel_id').val()
                        ,game_id = $('#game_id').val();

                    table.reload('tableId', {
                        page: {curr: 1}
                        ,where: {channel_id:channel_id, game_id:game_id}
                        ,height: 'full-100'
                    })
                },
            };
        //游戏多选
        $('#channel_select').change(function() {
            $('#channel_id').val($(this).val());
        })
        $("#channel_select").selectpicker({noneSelectedText:'请选择渠道'});

        $('#game_select').change(function() {
            $('#game_id').val($(this).val());
        })
        $("#game_select").selectpicker({noneSelectedText:'请选择游戏'});
        $('#searchBox .layui-form-select').css('display', 'none');

        //表格初始化
        table.render({
            elem: '#tableBox'
            ,height: 'full-100'
            ,url: '{:url("ChannelIssue/index")}'
            ,page: true
            ,limit:20
            ,limits:[20,40,60,80]
            ,loading:true
            ,id:'tableId'
            ,done: function () {
                layer.close(load);
                $('#layui-loading').hide();
            }
            ,cols: [[
                {field:'channel_id', title: '渠道ID', width: 100}
                ,{field:'channel_name', title: '渠道名称', width: 200}
                ,{field:'game_id', title: '游戏ID', width: 100}
                ,{field:'game_name', title: '游戏名称', width: 200}
                ,{field:'download', title: '下载地址', width: 600}
                ,{field:'status', title: '状态', width: 150}
                ,{title: '操作', align:'center', width: 200, toolbar:'#tableBar'}
            ]]
        });

        $('#searchBox .searchBtn').on('click', function(){
            load = layer.load();
            active['reload'].call(this);
            return false;
        });

        //监听搜索栏
        $('#pack').on('click', function(){

            layer.confirm('确定要加入打包队列吗？', {offset: '250px'}, function(index){
                var load = layer.load()
                    ,channel_all = $('#channel_id').val()
                    ,game_all = $('#game_id').val();
                $.post('{:url("ChannelIssue/pack")}',{channel_all:channel_all, game_all:game_all}, function(json){
                    layer.close(load);
                    if(json.code==0){
                        layer.msg(json.msg, {icon: 1, time:1000})
                    }else{
                        layer.msg(json.msg, {icon: 0, time:1000});
                    }
                }, 'JSON').error(function(){
                    layer.close(load);
                    layer.msg('连接超时，请联系后台管理员', {icon: 2, time:3000});
                });
            });
        })
    });
</script>
{/block}